{% extends 'base.html' %}
{% block style %}
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/layui/layui.js"></script>

{% endblock %}
{% block content %}
    <div class="contents">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb my-breadcrumb">
                <li class="breadcrumb-item"><a href="/index">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">文本分类</li>
            </ol>
        </nav>
        <div class="welcome-msg pt-3 pb-4">
            <h1>Hi <span class="text-primary">{{ username }}</span>, 欢迎回来！</h1>
        </div>
        <div class="grid_wrapper" style="margin-top: 40px">
            <div class="g_12 separator"><span></span></div>
            <div style="clear: both"></div>
            <div style="margin-left: 20%">
                <input type="text" class="input-text" placeholder="请输入文本" id="name" style="width: 60%">
                <button type="button" class="button" id="classify" style="margin: 20px 20%">开始分类</button>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $(function () {
            $(document).on("click", "#classify", function () {
                var name = $("#name").val();
                if (name.trim() === "") {
                    // 如果内容为空，给出提示
                    return;
                }
                $.ajax({
                    type: 'POST',
                    url: "/predict1",
                    dataType: 'json',
                    data: {'text': name},
                    success: function (data) {
                        var value = data.result;
                        console.log(value);
                        $("#name").val('');
                        alert(value);
                    },
                    error: function (xhr, type) {
                        if (xhr.status == 505) {
                            alert('提取失败，请查看后台');
                        }
                    }
                });
            });
        });
    </script>
{% endblock %}
